import React, {Component} from "react";
import ReactDom from "react-dom"
let exampleStyle =  {
    background: "skyblue",
    borderBottom: "1px solid red"
}
//样式和注释
let element = (
    <div>
        {/*注释使用打括号和斜杠* */}
        <h1 style={exampleStyle}>hello world</h1>
    </div>
)

//函数式组件
function FunctionComponent(props) {
    let title = <h2>副标题</h2>
    let isGo = props.weather === '下雨' ? '不出门' : '出门'
    return (
        <div>
            <h1>函数式子组件</h1>
            {title}

            <div>
                 是否出门？
                <span>{isGo}</span>
            </div>
        </div>
    )
}

//类组件
class ClassComponent extends React.Component {
    render() {
        return (
            <div>
                <h1>这是个类组件</h1>
                <FunctionComponent weather="不下雨"/>
            </div>
        )
    }
}
ReactDom.render(
    <ClassComponent/>,
    document.querySelector('#root')
)